﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="File.aspx.cs" Inherits="BugSysSolution.HTML5Info.File" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="d1">
        HTML5支持对file文件的操作，并且可以通过ajax直接将文件以文件流传输到后台处理.
        <input type="file" name="files" id="files" multiple="multiple" onchange="fileSelected();" />
        <div id="fileName">
        </div>
        <div id="fileSize">
        </div>
        <div id="fileType">
        </div>
        <input type="button" value="上传" onclick="uploadFile();" />
    </div>
    </form>
</body>
</html>
<script type="text/javascript">
    /*
    formdata对象是不能序列化的，目前只有append方法
    在html5中 XMLHttpRequest是lv2  不同于html4.01标准,他加强了.
    XHR2是HTML5新特性中的一个(事实上没有什么XHR1，XHR2这样的概念，XHR2只是HTML5提供的一套新的规范)，在原有XHR对象上新增了一些功能：
    跨域访问，(在服务器端返回内容的页面,Response.AddHeader("Access-Control-Allow-Origin","*"),
                在一些ajax类库里面注释掉headers["X-requestd-With"]="XMLHttpRequest";就能跨域了.)
    全新的事件，
    还有请求进度,
    响应进度.
    给个地址:http://www.cnblogs.com/plums/archive/2012/07/31/2616355.html 介绍XMLHttpRequest-lv2的信息
    */

    function fileSelected() {
        var file = document.getElementById("files").files[0];
        if (file) {
            document.getElementById("fileName").innerHTML = "Name: " + file.name;
            document.getElementById("fileSize").innerHTML = "Size: " + file.size + "kb";
            document.getElementById("fileType").innerHTML = "Type: " + file.type;
        }
    }

    function uploadFile() {
        var xhr = new XMLHttpRequest();
        var fd = new FormData();
        fd.append("files", document.getElementById('files').files[0]);
        xhr.send(fd);
    }

</script>
